<template>
  <div class="ai-intro-section">
    <div class="intro-content">
      <!-- 方案一：专业简洁版 -->
      <h1 class="main-title" v-if="version === 'professional'">
        我是MatCreate AI，很高兴见到你！
      </h1>
      <p class="sub-title" v-if="version === 'professional'">
        我可以帮你设计材料、合成材料、解答问题，请把你的任务交给我吧
      </p>
      
      <!-- 方案二：功能突出版 -->
      <h1 class="main-title" v-if="version === 'functional'">
        材料设计 · 智能合成 · 专业解答
      </h1>
      <p class="sub-title" v-if="version === 'functional'">
        让AI成为您的材料科学研究伙伴
      </p>
      
      <!-- 方案三：服务导向版 -->
      <h1 class="main-title" v-if="version === 'service'">
        材料科学全方位智能服务
      </h1>
      <p class="sub-title" v-if="version === 'service'">
        设计 | 合成 | 分析 | 优化 - 一站式解决方案
      </p>
      
      <!-- 默认版本 -->
      <h1 class="main-title" v-if="!version || version === 'default'">
        我是MatCreate AI，很高兴见到你！
      </h1>
      <p class="sub-title" v-if="!version || version === 'default'">
        我可以帮你设计材料、合成材料、解答问题，请把你的任务交给我吧
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义组件属性
interface Props {
  version?: 'professional' | 'functional' | 'service' | 'default' // 文案版本选择
  theme?: 'light' | 'dark' | 'gradient' // 主题样式
}

// 使用默认值
const props = withDefaults(defineProps<Props>(), {
  version: 'professional',
  theme: 'gradient'
})
</script>

<style lang="scss" scoped>
/* AI介绍区域样式 */
.ai-intro-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  
  /* 浅色主题 */
  &.light {
    background: #f8f9fa;
  }
  
  /* 深色主题 */
  &.dark {
    background: #2c3e50;
    
    .main-title {
      color: #ecf0f1;
    }
    
    .sub-title {
      color: #bdc3c7;
    }
  }
}

.intro-content {
  text-align: center;
  max-width: 800px;
}

.main-title {
  font-size: 2.2rem; /* 第一行字体大小保持不变 */
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.3;
  background: linear-gradient(45deg, #007CF0, #00DFD8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 确保在不支持背景裁剪的浏览器中有备用颜色 */
  @supports not (-webkit-background-clip: text) {
    color: #007CF0;
  }
}

.sub-title {
  font-size: 1.1rem; /* 第二行字体比第一行小 */
  color: #666;
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-intro-section {
    padding: 1.5rem 1rem;
    min-height: 150px;
  }
  
  .main-title {
    font-size: 1.6rem; /* 移动端第一行字体 */
  }
  
  .sub-title {
    font-size: 1rem; /* 移动端第二行字体，保持比第一行小 */
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 1.4rem;
  }
  
  .sub-title {
    font-size: 0.9rem;
  }
}
</style>
